<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .demo {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <button id="btn">点我创建一个输入框</button>
    <script>
      const btn = document.getElementById('btn');
      btn.onclick = () => {
        const input = document.createElement('input');
        input.className = 'demo';
        input.onclick = () => {
          alert(1);
        };
        input.value = 100;
        // input.focus(); ////执行时机有问题
        document.body.appendChild(input);
        input.focus();
        input.parentElement.style.backgroundColor = 'skyblue';
      };
    </script>
  </body>
</html>
